<script setup lang="ts">
const route = useRoute(); // 当前页面路由信息
const routeList = ref(route.matched);
</script>
<template>
  <div class="breadcrumb">
    <el-card class="box-card">
      <div class="breadcrumb-box">
        <span v-for="(item, index) in routeList" :key="index">
          <span
            class="breadcrumb-text"
            :class="{ 'text-active': index === routeList.length - 1 }"
          >
            {{ item.meta.title }}
          </span>
          <i class="separator" v-if="index !== routeList.length - 1">/</i>
        </span>
      </div>
      <slot name="button"></slot>
    </el-card>
  </div>
</template>
<style scoped lang="scss">
.breadcrumb {
  font-size: 14px;
  background: #fff;
  height: 56px;
  line-height: 56px;
  .box-card {
    width: 100%;
    ::v-deep .el-card__body {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 13px;
      .breadcrumb-box {
        span {
          color: rgb(153, 153, 153);
          cursor: text;
        }

        .breadcrumb-text {
          padding-right: 4px;
        }

        .text-active {
          color: #495060;
          cursor: text;
        }

        .separator {
          padding-right: 6px;
        }
      }

      button {
        font-size: 12px;
      }
    }
  }
}
</style>
